<template>
  <div class="main-content repay-list">
    <div class="mc-left_title">
      <span>还款列表</span>
    </div>
    <div class="tsd-base">
      <div class="tb-top">
        <a @click="backNext" style="color: #e7ac27; float: right;">返回上一级</a>
      </div>
      <div class="tb-middle">
        <el-table :data="tableData" v-loading="loading" fit highlight-current-row element-loading-text="数据加载中" style="width: 100%">
          <el-table-column
              prop="repaymentNo"
              width="220"
              label="还款流水">
          </el-table-column>
          <el-table-column
              label="还款时间">
            <template slot-scope="scope">
              <span>{{ scope.row.repayDate}}</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="amount"
              label="还款金额">
          </el-table-column>
          <el-table-column
              prop="interest"
              label="利息">
          </el-table-column>

        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import Top from '@/components/layout/top';
import {queryWMRRepaymentRecord} from '@/api/plat/plat';
import {mapState} from "vuex";

export default {
  name:'platRepay',
  data() {
    return {
      loading:false,
      tableData: []
    };
  },
  props:['drawdownId'],
  components: {
    Top
  },
  computed: mapState({
    user(state) {
      return state.user;
    }
  }),
  mounted() {
    this.getRepayList();
  },
  methods: {
    backNext(){
      this.$emit('backNext')
    },
    getRepayList() {
      let _this = this;
      this.loading = true;
      queryWMRRepaymentRecord({
        "drawdownId": this.drawdownId
      }).then(response => {
        if (response.code === 200) {
          _this.tableData = response.data;
        }
        _this.loading = false;
        _this.$emit('completed')
      }).catch(e=>{
        _this.loading = false;
        _this.$emit('completed')
      });
    }
  }
}
</script>

<style lang="scss">
.repay-list {
  margin-top: 0;
  width: 100%;
  min-height: calc(100vh - 90px);
  .tb-middle {
    margin: 0 auto 20px auto;
    padding: 0 20px;

    .ap-title {
      margin-bottom: 15px;
      display: block;
      font-size: 18px;
    }

    .el-table__header th {
      background-color: #FF9B00;
      color: white;
    }
  }

  .tb-top {
    height: 50px;
    padding: 0 20px;

    .fir-btn {
      width: 93px;
      height: 40px;
      padding-top: 10px;
      float: initial;
      margin-right: 0;
      border-radius: 20px;
      color: #FFA01D;
    }

    .fir-btn:focus, .fir-btn:hover {
      background-color: inherit;
      color: #FFA01D;
    }

    .ai-item {
      width: 30%;
      float: left;
      text-align: left;

      .search-btn {
        float: right;
        background: #FFA01D;
      }
    }

    .svg-money {
      .svg-icon {
        font-size: 20px;
      }
    }
  }
}
</style>
